<lv-group lvDirection="vertical" lvGutter="16px">
  <h3>Custom date selection panel cell</h3>
  <lv-date-picker [(ngModel)]="date" [lvCalendarCell]="tplCell" style="width: 368px"></lv-date-picker>
  <lv-date-range-picker [(ngModel)]="rangeDate" [lvCalendarCell]="tplCell" style="width: 368px"></lv-date-range-picker>

  <h3>Customize the month selection panel cell</h3>
  <lv-date-picker [(ngModel)]="date" [lvCalendarMonthCell]="tplMonthCell" lvPickerMode="month" style="width: 368px"></lv-date-picker>

  <h3>Custom year selection panel cell</h3>
  <lv-date-picker [(ngModel)]="date" [lvCalendarYearCell]="tplYearCell" lvPickerMode="year" style="width: 368px"></lv-date-picker>

  <h3>Customize panel style</h3>
  <lv-date-picker [(ngModel)]="date" lvPanelClass="customer" style="width: 368px"></lv-date-picker>
</lv-group>

<ng-template #tplCell let-cell>
  <span class="lv-date-picker-cell" style="border-radius: 50%;" [ngStyle]="{ border: cell.content == 15 ? '1px solid red' : '' }">{{
    cell.content
  }}</span>
</ng-template>
<ng-template #tplMonthCell let-cell>
  <span
    class="lv-date-picker-month-cell"
    style="border-radius: 50%;"
    [ngStyle]="{ border: cell.value.getMonth() % 2 == 0 ? '1px solid green' : '' }"
    >{{ cell.content }}</span
  >
</ng-template>
<ng-template #tplYearCell let-cell>
  <span
    class="lv-date-picker-year-cell"
    style="border-radius: 50%;"
    [ngStyle]="{ border: cell.value.getFullYear() % 2 == 0 ? '1px solid pink' : '' }"
    >{{ cell.content }}</span
  >
</ng-template>
